<template>
  <div>
    <van-nav-bar title="品牌分类" />
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="镜架" name="frame">
        <van-grid square :column-num="2" :gutter="0" :padding="0">
          <van-grid-item v-for="item in frameList" :key="item.id">
            <van-card
              :price="item.price"
              :title="item.name"
              @click="showDetail(item)"
            >
              <template #thumb>
                <img src="/static/2.png" style="width: 100px; height: 100px;" /> <!-- 使用模板插槽并设置样式 -->
              </template>
              <template #tags>
                <van-tag plain type="danger">{{ item.color }}</van-tag>
              </template>
              <template #footer>
                <van-button size="small" type="danger" @click.stop="addToCart(item)">加入购物车</van-button>
              </template>
            </van-card>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="镜片" name="lens">
        <van-grid square :column-num="2" :gutter="10" :padding="10">
          <van-grid-item v-for="item in lensList" :key="item.id">
            <van-card
              :price="item.price"
              :title="item.name"
              @click="showDetail(item)"
            >
              <template #thumb>
                <img src="/static/2.png" style="width: 100px; height: 100px;" /> <!-- 使用模板插槽并设置样式 -->
              </template>
              <template #tags>
                <van-tag plain type="danger">{{ item.type }}</van-tag>
              </template>
              <template #footer>
                <van-button size="small" type="danger" @click.stop="addToCart(item)">加入购物车</van-button>
              </template>
            </van-card>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showDialog, showToast } from 'vant'
import { useCartStore } from '../stores/cart.js'

const activeTab = ref('frame')
const cartStore = useCartStore()

// 模拟数据
const frameList = ref([
  {
    id: 1,
    name: '经典金属框',
    price: '299.00',
    color: '金色',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  },
  {
    id: 2,
    name: '时尚板材框',
    price: '199.00',
    color: '黑色',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  },
  {
    id: 3,
    name: '轻量钛合金框',
    price: '399.00',
    color: '银色',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  },
  {
    id: 3,
    name: '轻量钛合金框',
    price: '399.00',
    color: '银色',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  },
  {
    id: 3,
    name: '轻量钛合金框',
    price: '399.00',
    color: '银色',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  },
  {
    id: 3,
    name: '轻量钛合金框',
    price: '399.00',
    color: '银色',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  },
  {
    id: 3,
    name: '轻量钛合金框',
    price: '399.00',
    color: '银色',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  }
])

const lensList = ref([
  {
    id: 1,
    name: '防蓝光镜片',
    price: '199.00',
    type: '1.56',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  },
  {
    id: 2,
    name: '渐进片',
    price: '599.00',
    type: '1.67',
    image: 'https://img.yzcdn.cn/vant/ipad.jpeg'
  }
])

const showDetail = (item) => {
  showDialog({
    title: item.name,
    message: `价格：${item.price}\n${item.color || item.type ? `规格：${item.color || item.type}` : ''}`,
    confirmButtonText: '确定'
  })
}

const addToCart = (item) => {
  cartStore.addToCart(item)
  showToast('已加入购物车')
}
</script>

<style scoped>
.brand-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}
</style> 